<template>
  <div id="roles">
    <el-breadcrumb style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 上面工具栏 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            clearable
            placeholder="请输入角色名查询"
            v-model="queryMap.roleName"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            @click="addDialogVisible=true"
          >添加</el-button>
        </el-col>
        <el-col :span="2">
          <el-button
            icon="el-icon-download"
            @click="getExportRoleExcel"
          >导出</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <template>
        <el-table
          :data="roleData"
          border
          style="width: 100%;margin-top:20px;"
          height="460"
        >
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="roleName" label="角色名" width="180"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column prop="status" label="是否禁用" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="grantDialogVisible=true"
                type="text"
                icon="el-icon-present"
                size="small"
              >授权</el-button>
              <el-button @click="edit(scope.row)" type="text" icon="el-icon-edit" size="small">编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="small"
                @click="delByIds(scope.row,scope.$index)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>


      <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryMap.pageNum"
        :page-sizes="[6, 9, 12, 15]"
        :page-size="queryMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <!-- 添加弹框 -->
      <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
        <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="addFormRoles">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" prop="remark">
            <el-input type="textarea" v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnDisabled"
            @click="getAddRole"
          >确 定</el-button>
        </span>
      </el-dialog>


      <!-- 编辑弹框 -->
      <el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="60%" >
        <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="addFormRoles">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="editForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" prop="remark">
            <el-input type="textarea" v-model="editForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnDisabled"
            @click="getUpdateRole"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 角色授权弹出框 -->
      <el-dialog title="分配菜单权限" :visible.sync="grantDialogVisible" width="38%">
        <span>
          <el-tree
            :auto-expand-parent="false"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="open"
            :props="defaultProps"
            ref="tree"
            highlight-current
          ></el-tree>
          <!-- check-strictly -->
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="grantDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            icon="el-icon-setting"
            :loading="btnLoading"
            :disabled="btnDisabled"
          >授 权</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import { addRole, delRole, exportRoleExcel, findAll, findById, updateRole } from '../../api/role'

  export default {
    name: 'roles',
    data() {
      return {
        btnLoading: false,
        btnDisabled: false,
        loading: true,
        total: 0,
        queryMap: { roleName: "", pageNum: 1, pageSize: 6 }, //查询条件
        roleData: [ ], //角色表格数据
        addForm: {}, //添加数据
        editForm: {}, //编辑数据
        addDialogVisible: false, //添加弹框的显示
        editDialogVisible: false, //编辑弹框
        grantDialogVisible: false, //授权弹出框
        data: [
          {
            "id": 1,
            "parentId": 0,
            "menuName": "系统管理",
            "url": "",
            "icon": "el-icon-setting",
            "orderNum": 1,
            "open": 1,
            "disabled": false,
            "perms": null,
            "type": 0,
            "children": [
              {
                "id": 253,
                "parentId": 1,
                "menuName": "欢迎页面",
                "url": "/welcome",
                "icon": "el-icon-star-off",
                "orderNum": 1,
                "open": 0,
                "disabled": false,
                "perms": "welcome:view",
                "type": 0,
                "children": []
              },
              {
                "id": 226,
                "parentId": 1,
                "menuName": "用户管理",
                "url": "/users",
                "icon": "el-icon-user",
                "orderNum": 2,
                "open": 0,
                "disabled": false,
                "perms": "users",
                "type": 0,
                "children": []
              },
              {
                "id": 321,
                "parentId": 1,
                "menuName": "附件管理",
                "url": "/attachments",
                "icon": "el-icon-picture-outline",
                "orderNum": 2,
                "open": 1,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              },
              {
                "id": 4,
                "parentId": 1,
                "menuName": "菜单权限",
                "url": "/menus",
                "icon": "el-icon-help",
                "orderNum": 3,
                "open": 0,
                "disabled": false,
                "perms": null,
                "type": 0,
                "children": []
              },
              {
                "id": 235,
                "parentId": 1,
                "menuName": "角色管理",
                "url": "/roles",
                "icon": "el-icon-postcard",
                "orderNum": 3,
                "open": 0,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              },
              {
                "id": 261,
                "parentId": 1,
                "menuName": "部门管理",
                "url": "/departments",
                "icon": "el-icon-s-home",
                "orderNum": 3,
                "open": 0,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              },
              {
                "id": 319,
                "parentId": 1,
                "menuName": "公告管理",
                "url": "/notices",
                "icon": "el-icon-s-flag",
                "orderNum": 4,
                "open": 0,
                "disabled": true,
                "perms": "",
                "type": 0,
                "children": []
              }
            ]
          },
          {
            "id": 312,
            "parentId": 0,
            "menuName": "业务管理",
            "url": null,
            "icon": "el-icon-s-goods",
            "orderNum": 2,
            "open": 0,
            "disabled": false,
            "perms": null,
            "type": 0,
            "children": [
              {
                "id": 229,
                "parentId": 312,
                "menuName": "物资管理",
                "url": "",
                "icon": "el-icon-date",
                "orderNum": 1,
                "open": 1,
                "disabled": false,
                "perms": "el-icon-date",
                "type": 0,
                "children": [
                  {
                    "id": 230,
                    "parentId": 229,
                    "menuName": "物资入库",
                    "url": "/inStocks",
                    "icon": "el-icon-date",
                    "orderNum": 1,
                    "open": 1,
                    "disabled": false,
                    "perms": "el-icon-date",
                    "type": 0,
                    "children": []
                  },
                  {
                    "id": 267,
                    "parentId": 229,
                    "menuName": "物资资料",
                    "url": "/products",
                    "icon": "el-icon-goods",
                    "orderNum": 2,
                    "open": 0,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  },
                  {
                    "id": 268,
                    "parentId": 229,
                    "menuName": "物资类别",
                    "url": "/productCategorys",
                    "icon": "el-icon-star-off",
                    "orderNum": 2,
                    "open": 0,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  },
                  {
                    "id": 270,
                    "parentId": 229,
                    "menuName": "物资发放",
                    "url": "/outStocks",
                    "icon": "el-icon-goods",
                    "orderNum": 5,
                    "open": 1,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  },
                  {
                    "id": 316,
                    "parentId": 229,
                    "menuName": "物资库存",
                    "url": "/stocks",
                    "icon": "el-icon-tickets",
                    "orderNum": 5,
                    "open": 0,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  }
                ]
              },
              {
                "id": 311,
                "parentId": 312,
                "menuName": "物资流向",
                "url": null,
                "icon": "el-icon-edit",
                "orderNum": 3,
                "open": 0,
                "disabled": false,
                "perms": null,
                "type": 0,
                "children": [
                  {
                    "id": 310,
                    "parentId": 311,
                    "menuName": "物资去处",
                    "url": "/consumers",
                    "icon": "el-icon-edit",
                    "orderNum": 1,
                    "open": 0,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  },
                  {
                    "id": 269,
                    "parentId": 311,
                    "menuName": "物资来源",
                    "url": "/suppliers",
                    "icon": "el-icon-coordinate",
                    "orderNum": 5,
                    "open": 0,
                    "disabled": false,
                    "perms": "",
                    "type": 0,
                    "children": []
                  }
                ]
              }
            ]
          },
          {
            "id": 303,
            "parentId": 0,
            "menuName": "健康报备",
            "url": "",
            "icon": "el-icon-platform-eleme",
            "orderNum": 3,
            "open": 0,
            "disabled": false,
            "perms": "",
            "type": 0,
            "children": [
              {
                "id": 273,
                "parentId": 303,
                "menuName": "全国疫情",
                "url": "/map",
                "icon": "el-icon-s-opportunity",
                "orderNum": 1,
                "open": 1,
                "disabled": false,
                "perms": "map:view",
                "type": 0,
                "children": []
              },
              {
                "id": 304,
                "parentId": 303,
                "menuName": "健康打卡",
                "url": "/health",
                "icon": "el-icon-s-cooperation",
                "orderNum": 1,
                "open": 0,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              },
              {
                "id": 305,
                "parentId": 303,
                "menuName": "查看情况",
                "url": null,
                "icon": "el-icon-c-scale-to-original",
                "orderNum": 2,
                "open": 1,
                "disabled": false,
                "perms": null,
                "type": 0,
                "children": []
              },
              {
                "id": 272,
                "parentId": 303,
                "menuName": "疫情辟谣",
                "url": "/rumors",
                "icon": "el-icon-help",
                "orderNum": 5,
                "open": 0,
                "disabled": false,
                "perms": null,
                "type": 0,
                "children": []
              }
            ]
          },
          {
            "id": 295,
            "parentId": 0,
            "menuName": "其他管理",
            "url": "",
            "icon": "el-icon-s-marketing",
            "orderNum": 5,
            "open": 0,
            "disabled": false,
            "perms": "",
            "type": 0,
            "children": [
              {
                "id": 297,
                "parentId": 295,
                "menuName": "监控管理",
                "url": "",
                "icon": "el-icon-warning",
                "orderNum": 1,
                "open": 0,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": [
                  {
                    "id": 298,
                    "parentId": 297,
                    "menuName": "SQL监控",
                    "url": "/druid",
                    "icon": "el-icon-view",
                    "orderNum": 1,
                    "open": 0,
                    "disabled": false,
                    "perms": null,
                    "type": 0,
                    "children": []
                  }
                ]
              },
              {
                "id": 341,
                "parentId": 295,
                "menuName": "个人博客",
                "url": "/blog",
                "icon": "el-icon-view",
                "orderNum": 1,
                "open": 0,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              },
              {
                "id": 296,
                "parentId": 295,
                "menuName": "swagger文档",
                "url": "/swagger",
                "icon": "el-icon-document",
                "orderNum": 2,
                "open": 0,
                "disabled": false,
                "perms": null,
                "type": 0,
                "children": []
              },
              {
                "id": 318,
                "parentId": 295,
                "menuName": "图标管理",
                "url": "/icons",
                "icon": "el-icon-star-off",
                "orderNum": 2,
                "open": 1,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              }
            ]
          },
          {
            "id": 5,
            "parentId": 0,
            "menuName": "日志管理",
            "url": "/logs",
            "icon": "el-icon-camera",
            "orderNum": 6,
            "open": 0,
            "disabled": false,
            "perms": null,
            "type": 0,
            "children": [
              {
                "id": 271,
                "parentId": 5,
                "menuName": "登入日志",
                "url": "/loginLog",
                "icon": "el-icon-date",
                "orderNum": 1,
                "open": 0,
                "disabled": false,
                "perms": "login:log",
                "type": 0,
                "children": []
              },
              {
                "id": 307,
                "parentId": 5,
                "menuName": "操作日志",
                "url": "/logs",
                "icon": "el-icon-edit",
                "orderNum": 1,
                "open": 1,
                "disabled": false,
                "perms": "",
                "type": 0,
                "children": []
              }
            ]
          }
        ],
        open: [1, 229, 230, 270, 273, 281, 282, 305, 307, 308, 318, 320, 321, 322, 325, 326, 332, 337], //展开
        grantId: "",
        defaultProps: {
          children: "children",
          label: "menuName"
        },
        addFormRoles: {
          roleName: [
            { required: true, message: "请输入角色名称", trigger: "blur" },
            { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
          ],
          remark: [
            { required: true, message: "请输入角色描述信息", trigger: "blur" },
            { min: 5, max: 20, message: "长度在 5 到 20 个字符", trigger: "blur" }
          ]
        }, //添加验证规则
        editId : null
      };
    },
    /*创建主键时调用方法*/
    created(){
      //创建主键的时候调用查询所有用户的方法
      this.getRoleList();
    },
    methods: {
      //改变页码
      handleSizeChange(newSize) {
        this.queryMap.pageSize = newSize;
        this.getRoleList()
      },
      //翻页
      handleCurrentChange(current) {
        this.queryMap.pageNum = current;
        this.getRoleList()
      },
      /*查询全部*/
      async getRoleList(){
        const {data} = await findAll(this.queryMap.pageNum,this.queryMap.pageSize,this.queryMap.roleName);
        /*将查询出来的数据赋值*/
         this.roleData = data.data.page.records;
         this.total = data.data.page.total;
        /*将用户信息输出在控制台上*/
        console.log(data)
      },

      /*提交表单*/
      onSubmit () {
        /*this.findAll(this.current,this.size,this.userVo)*/
        this.getRoleList()
      },
      /*编辑按钮点击事件*/
      edit(row){
        this.editDialogVisible = true
        this.getFindById(row.id)
      },

      /*删除按钮点击事件*/
      delByIds(row,index){
        var b = confirm("确定进行删除操作吗？")
          if(b){
            var postDelRole1 = this.postDelRole(row.id)
            if(postDelRole1){
              alert("用户角色信息删除成功");
              this.roleData.splice(index,1)
            }else{
              alert("遇到未知异常，删除操作失败")
            }
          }
      },
      /*删除方法*/
      async postDelRole(id){
        const {data} = await delRole(id)
        console.log(data.data.result)
      },

      /**
       * 根据id进行查询
       * @param id
       * @returns {Promise<void>}
       */
      async getFindById(id){
        const {data}  = await findById(id)
        this.editForm = data.data.role
        this.editId =  data.data.role.id
        console.log(data.data.role.id)
      },

       /*修改方法*/
      async getUpdateRole(){
        this.editForm.id = this.editId;
        const { data: res } = await updateRole(this.editForm)
        if (res.code == 200) {
          this.$notify.success({
            title: '操作成功',
            message: '用户修改成功',
          })
          //关闭
         this.editDialogVisible = false
          this.editForm = {}
          /*调用刷新方法*/
          /*this.reload();*/
          this.getRoleList()
        } else {
          return this.$message.error('用户修改失败:' + res.message)
        }
      },

      /*新增方法*/
      async getAddRole(){
        const { data: res } = await addRole(this.addForm)
        if (res.code == 200) {
          this.$notify.success({
            title: '操作成功',
            message: '用户添加成功',
          })
          //关闭
          this.addDialogVisible = false
          this.addForm = {}
          /*调用刷新方法*/
          /*this.reload();*/
          this.getRoleList()
        } else {
          return this.$message.error('用户添加失败:' + res.message)
        }
      },

      /*导出用户角色信息*/
      async getExportRoleExcel(){
        exportRoleExcel(this.queryMap.roleName).then(res => {
          //这里没有返回数据,但是要在响应头中进行下载操作
          // 将二进制文件转化为可访问的url
          let url = window.URL.createObjectURL(new Blob([res.data]));
          var a = document.createElement("a");
          document.body.appendChild(a);
          a.href = url;
          a.download = "用户角色列表.xls";
          a.click();
          window.URL.revokeObjectURL(url);
        }).catch(err => {

        })
      },
    },
  };
</script>
